<template>
    <div>
        <div class="container">
            <!--顶部标题-->
            <div class="toptitle">
                <h2>品牌管理</h2>
            </div>
            <!--表格-->
            <table class="table table-bordered">
                <thead>
                    <tr class="trs">
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>价格</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>

                </thead>
                <tbody>
                    <tr class="trs" v-for="item in brandList" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td :class="{red: item.price >100}">{{item.price}}</td>
                        <td>{{item.time}}</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr style="background-color: blanchedalmond;">
                        <td>统计:</td>
                        <td colspan="2">总价格: {{ allPrice }}</td>
                         <td colspan="2">平均价格: {{ avgPrice }}</td>
                    </tr>
                </tbody>
            </table>
            <!---添加品牌-->
            <form class="form-inline">
                <div class="form-input">
                   品牌名称: <input type="text" class="form-control" placeholder="请输入品牌名称" v-model="name">
                </div>
                <br>
                 <div class="form-input">
                      品牌价格:  <input type="text" class="form-control" placeholder="请输入品牌价格" v-model.number="price">
                    </div>
                    <br>
                    <!--会有表单重复提交或双击自动提交-->
                    <button class="btn btn-primary" @click.prevent="addFn">添加品牌</button>
            </form>
        </div>

    </div>


</template>
<script>
export default {
    data() {
        return {
            name: "",
            price: 0,
            brandList: [
                { id: 100, name: '宝马', price: 200, time: new Date("2024-10-24") },
                { id: 101, name: '奔驰', price: 20, time: new Date("2024-10-24") },
                { id: 102, name: '奥迪', price: 18, time: new Date("2024-10-24") },
                { id: 103, name: '奥拓', price: 9, time: new Date("2024-10-24") }
            ]
        }

    },
    methods: {
        addFn() {
            // this.brandList.push({ id: this.brandList[this.brandList.length - 1].id + 1, name: this.name, price: this.price });
            this.brandList.push({
                id: this.brandList[this.brandList.length - 1].id + 1,
                name: this.name,
                price: this.price,
                time: new Date()
            })
        }
    },
    computed: {
        allPrice() { 
            //求总价
            return this.brandList.reduce((pre, cur) => pre + cur.price, 0);
        },
        avgPrice() { 
            //求平均价 保留两位小数
            return (this.allPrice / this.brandList.length).toFixed(2)
        }
    }
}


</script>
<style scoped>
.container{
    width: 100%;
    border: 1px solid #ccc;
}
.toptitle{
    text-align: center;
}
thead tr th{
    border-left: 1px solid #ccc;
    margin-left: 20px;
    padding-left: 20px;
}
tbody tr td{
    /* margin-left: 20px; */
    padding-top: 20px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
}
a{
    text-decoration: none;
}
.form-inline{
    padding: 20px;
}

.red{
    color:red
}
</style>